<!-- page-table表格组件 -->
<template>
  <div class="page_table">
    <my-table :table-data="tableDataList" v-model:page="pagination" :page="page" :total="total"
      :table-config="tableConfig" @selectionChange="handleSelectionChange">
      <template #header="{ row }">
        <el-popconfirm title="确定要删除?" @confirm="handleDel(null)" v-if="tableConfig?.showSelection">
          <template #reference>
            <el-button type="danger" size="small" :disabled="!ids.length">批量删除
            </el-button>
          </template>
        </el-popconfirm>
        <el-button type="success" size="small" @click="handleCreateOrEdit(null)">添加
        </el-button>
        <el-button type="success" ype="success" size="small" @click="handleImport">
          导入</el-button>
        <el-button type="success" size="small" @click="handleExport">
          导出</el-button>
      </template>
      <template #status="{ row }">
        <el-button :type="row.status ? 'success' : 'danger'" size="mini" plain>
          {{ row.status ? "启用" : '禁用' }}
        </el-button>
      </template>
      <template #handle="{ row }">
        <el-button type="text" icon="el-icon-edit" size="mini" @click="handleCreateOrEdit(row)">
          修改</el-button>
        <el-popconfirm title="确定要删除此条记录?" @confirm="handleDel(row)">
          <template #reference>
            <el-button type="text" icon="el-icon-delete" size="mini">
              删除</el-button>
          </template>
        </el-popconfirm>
        <slot name="password" :row="row"></slot>
        <slot name="uploadAvatar" :row="row"></slot>
      </template>
      <!--动态设置插槽 -->
      <template v-for="item in dynamicSlotName" #[item.slotName]="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
    </my-table>
  </div>
</template>
<script >
import myTable from '@/base-ui/table/my-table.vue'

export default {
  components: { myTable },
  props: {
    tableConfig: {
      type: Object,
      required: true
    },

    tableDataList: {
      type: Array,
      required: true
    },
    total: {
      type: Number,
      required: true
    },
    page: {
      type: Object,
      required: true
    }
  }
  ,
  watch: {
    pagination() {
      getTableDataListDispatch()
    }

  },

  data() {
    return {
      pagination: {
        currentPage: 1,
        pageSize: 10,

      },
      ids: [],
      propsSlotNameData: this.tableConfig?.propsList || [],
      publicSlotName: ['status', 'handle'],
      dynamicSlotName: []
    }
  },
  created() {
    this.init()
  },

  methods: {
    getTableDataListDispatch(searchKeywords) {
      // console.log(searchKeywords);

      // 有查询权限 才发送网络请求
      if (!isPerMap.get('query')) return false
      let queryInfo = {
        currentPage: pagination.value.currentPage,
        pageSize: pagination.value.pageSize,
      }
      if (searchKeywords) {
        for (const key in searchKeywords) {

          let element = searchKeywords[key]
          // 去除所有搜索条件的前后空格
          if (typeof searchKeywords[key] == 'string') {
            searchKeywords[key] = searchKeywords[key].trim()
          }
          // 去除无效字段
          if (key != 'status' && element === '') {
            delete searchKeywords[key]
          }

        }
        // 查询数据拼接
        queryInfo['otherWhere'] = { ...searchKeywords }
      }
      // 保存搜索条件 保证数据的统一 删除某一数据后依然展示符合上次搜索条件的数据
      store.commit('saveQueryInfo', { ...queryInfo, ...pagination.value })
      store.dispatch(`${props.pageName}/${props.pageName}ListAction`, { queryInfo })

    },
    // 动态插槽
    init() {
      this.dynamicSlotName = this.propsSlotNameData?.filter(item => {
        if (this.publicSlotName.includes(item.slotName)) return false
        return true
      })
    },
    // 处理 添加/修改事件
    handleCreateOrEdit(row) {
      this.$emit('createOrEdit', row)
    },

    // 获取批量删除数据的id
    handleSelectionChange(selection) {
      if (selection.length) {
        this.ids = []
        selection.forEach(item => this.ids.push(item.id))
      } else {
        this.ids = []
      }
      this.ids = [...new Set(this.ids)]

    },
    //删除按钮事件
    handleDel(row) {
      this.$emit('del', row)
    },

    // 处理导入 事件
    handleImport() {

      this.$emit('importData')
    },
    // 处理导出事件
    handleExport() {
      this.$emit('exportData')

    },


  }
}


</script>
<style lang='less' scoped>
.page_table {
  padding: 20px;
}
</style>
